<template>
 <div class="plan">
    <img class="plan-pic" src="@/assets/img/banner5.png" alt=""/>
    <div class="plan-warpper">
      <div class="filter-box">
        <!-- 筛选 -->
        <div class="all">全部</div>
        <ul class="hot">
          <li class="title">类别:</li>
          <li v-for="(item,index) in category" :key="index">
            <span :class="item.active?'isActive':''" @click="handleConditionfilter(index,item.active,'category')">{{item.name}}</span>
          </li>
        </ul>
        <ul class="hot">
          <li class="title">品牌:</li>
          <li v-for="(item,index) in  brand" :key="index">
            <span :class="item.active?'isActive':''" @click="handleConditionfilter(index,item.active,'brand')">{{item.name}}</span>
          </li>
        </ul>
        <ul class="hot">
          <li class="title">内容类型:</li>
          <li v-for="(item,index) in contentType" :key="index">
            <span :class="item.active?'isActive':''" @click="handleConditionfilter(index,item.active,'contentType')">{{item.name}}</span>
          </li>
        </ul>
      </div>
      <div class="condition">
        <ul class="condition-con">
          <li v-for="(item,index) in condition" :key="index" >
            <span :class="item.active?'isconActive':''" @click="filterCondition(index,item.active)">
              {{item.name}}
            </span>
            
          </li>
        </ul>
        <el-input
          placeholder="请输入方案"
          v-model="record.title"
          suffix-icon="el-icon-search"
          clearable>
        </el-input>
      </div>
      <!-- 列表 -->
      <div class="content">
        <ul class="video-list">
          <li class="list-box" v-for="item in videoList" :key="item.id" @click="goDetail(item.id)">
            <img :src="item.cover" alt=""/>
            <div class="video-tit">
              <p>{{item.title}}</p>
            </div>
            <div class="video-box">
              <ul class="store-name">
                <li v-for="(val,key) in item.tags" :key="key">
                  {{val.name}}
                </li>
              </ul>
              <p >
                <i class="el-icon-video-play"></i>
                <span class="view-num">&nbsp;&nbsp;{{item.viewNum}}</span>
              </p>
            </div>
          </li>
        </ul>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="record.currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="record.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import {getVideoCategories,getVideoBrand,getVideoType,getVideolist,getVideodetail} from "@/api/home.js";
export default {
  data() {
    return {
      category:[],//类别
      brand:[],//品牌
      contentType:[],//内容类型
      condition:[
        {
          id:40,
          name:'综合',
          active:true
        },
        {
          id:41,
          name:'发布时间',
          active:false
        },
        {
          id:42,
          name:'人气',
          active:false
        }
      ],//条件排序
      videoList:[],
      total:0,
      record:{
        title:'',
        filtercategory:'',
        filterbrand:'',
        filterType:'',
        filterCondition:'',
        orderByType:'desc',
        pageSize:20,
        currentPage:1,
      },
    }
  },
  created(){
    this.handleFilter();
    this.handleVideo()
  },
  methods:{
    handleSizeChange(size){
      this.record.pageSize = size;
    },
    handleCurrentChange(currentPage){
      this.record.currentPage = currentPage;
    },
    handleFilter(){
      getVideoCategories().then(res=>{
        if(res.code == 200){
          this.category = res.result;
          this.category.map(item=>{
            this.$set(item,'active', false)
          })
          let total = {name:'全部',active:true};
          this.category.unshift(total);
          // console.log(this.category)
        }
      })
      getVideoBrand().then(res=>{
        if(res.code == 200){
          this.brand = res.result;
          this.brand.map(item=>{
            this.$set(item,'active', false)
          })
          let total1 = {name:'全部',active:true};
          this.brand.unshift(total1);
          // console.log(this.brand)
        }
      })
      getVideoType().then(res=>{
        if(res.code == 200){
          this.contentType = res.result;
          this.contentType.map(item=>{
            this.$set(item,'active', false)
          })
          let total2 = {name:'全部',active:true};
          this.contentType.unshift(total2);
          // console.log(this.contentType)
        }
      })
    },
    handleVideo(){
      let params = {
        'page': this.record.currentPage,
        'size': this.record.pageSize,
        'hotNames':this.record.filtercategory,
        'cateNames':this.record.filterbrand,
        'typeDisplays':this.record.filterType,
        'orderByName':this.record.filterCondition,
        'orderByType':this.record.orderByType,
        'keyWord':this.record.title,
      }
      getVideolist(params).then(res=>{
        if(res.code == 200){
          console.log(res);
          this.total = res.result.total;
          this.videoList = res.result.list;
          console.log(this.videoList);
        }
      })
    },
    // 点击选项
    handleConditionfilter(index,active,field){
      let tempArr = this[field];
      console.log(tempArr);
      tempArr.forEach((item, arrIndex) => {
        if (index === arrIndex && !item.active) {
          item.active =  !active;
        }
        if(index !== arrIndex){
          item.active = false;
        }
      });
      this[field] = tempArr;
      this.category.map(item =>{
        if(item.active){
          this.record.filtercategory = item.id;
          // console.log(this.record.filteHot)
        }
      })
      this.brand.map(item =>{
        if(item.active){
          this.record.filterbrand = item.id;
        }
      })
      this.contentType.map(item =>{
        if(item.active){
          this.record.filterType = item.id;
        }
      })
    },
      // 条件筛选
    filterCondition(index,active){
      this.condition.forEach((item,arrIndex)=>{
        if(index === arrIndex && !item.active){
          item.active = !active;
        }
        if(index !== arrIndex){
          item.active = false;
        }
      })
      this.condition.map(item =>{
        if(item.active){
          this.record.filterCondition = item.id;
        }
      })
    },
    // 监听条件过滤
    handleFiltercontent(val){
      let params = {
        'page': val.currentPage,
        'size': val.pageSize,
        'hotNames':val.filtercategory,
        'cateNames':val.filterbrand,
        'typeDisplays':val.filterType,
        'orderByName':val.filterCondition,
        'orderByType':val.orderByType,
        'keyWord':val.title,
      }
     getVideolist(params).then(res=>{
        // console.log(res)
        if(res.code == 200){
          this.total = res.result.total;
          this.videoList = res.result.list;
        }else{
          this.$message.error('请重新操作');
        }
      })
    },
    // 跳转详情页
    goDetail(id){
      this.$router.push({
        name:"videoDetail",
        query:{
          id:id,
        }
      })
    },

  },
  watch:{
    record:{
      handler(val, oldval){
        console.log(val);
        this.handleFiltercontent(val)
      },
      deep:true
    }
  }
}
</script>

<style lang="less" scoped>
@import './../../../assets/style/edit.css';
.plan{
  width: 100%;
  .plan-pic{
    width: 100%;
    height: 300px;
  }
  .plan-warpper{
    width: 62.5%;
    // background: #fff;
    // padding:25px 0;
    border-radius: 10px;
    margin:25px auto 0;
    font-size: 15px;
    .filter-box{
      width: 100%;
      background: #fff;
      border-radius: 4px;
      margin-bottom: 30px;
      .all{
        font-size: 14px;
        font-weight: 400;
        color: #4370F3;
        line-height: 40px;
        padding-left: 20px;    
        border-bottom: 1px solid #EEEEEE;
      }
    }
    .hot{
      cursor: pointer;
      display: flex;
      // margin-bottom: 20px;
      .title{
        width: 140px;
        background: #F6F6F6;
        font-size: 14px;
        font-weight: 400;
        color: #191A24;
        line-height: 40px;
        padding-left: 20px;
        border-bottom: 1px solid #EEEEEE;
        margin-right: 15px;
        // &:after {
        //     content: '';
        //     display: inline-block;
        //     width: 100%;
        //   }
      }
      li{
        font-size: 14px;
        font-weight: 400;
        color: #666666;
        line-height: 40px;
        margin-right: 15px;
      }
    }
    .condition{
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      
      .condition-con{
        display: flex;
        li{
          border: 1px solid #CCCCCC;
          border-right: none;
          height: 32px;
          width: 80px;
          font-size: 14px;
          line-height: 32px;
          text-align: center;
          &:last-child{
            border-right: 1px solid #CCCCCC;
          }
        }
      }
      
      .el-input{
        width: 30%;
      }
    }
    .content{
      width: 100%;
      padding-top: 40px;
      .video-list{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        color: #606266;
        .list-box{
          width: 31.5%;
          height: 100%;
          box-shadow: 0 2px 10px rgba(124, 72, 117, 0.1);
          margin-right: 2%;
          margin-bottom: 20px;
          cursor: pointer;
          &:nth-child(3n){
            margin-right: 0;
          }
          &:hover{
            box-shadow: 0 0 10px 0 rgba(247, 37, 34,0.2);
            transition: all 0.3s;
          }
          img{
            width: 100%;
            height: 210px;
            display: block;
          }
          .video-tit{
            font-size: 18px;
            font-weight: 600;
            color: #191A24;
            line-height: 25px;
            padding: 10px 20px;
            p{
              width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 1;
              -webkit-box-orient: vertical;
            }
          }
          .video-box{
            display: flex;
            justify-content: space-between;
            align-items: center;
            // font-size: 12px;
            padding: 30px 20px 20px;
            .store-name{
              width: 50%;
              display: flex;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              li{
                font-size: 14px;
                font-weight: 400;
                color: #4370F3;
                line-height: 20px;
                padding: 3px 20px;
                background: #ECF1FF;
                border-radius: 2px;
                margin-right: 10px;
                &:last-child{
                  margin-right: 0;
                }
              }

            }
            i{
              // margin-left: 1%;
              font-size: 17px;
            }
            .view-num{
              font-size: 16px;
              font-weight: 400;
              color: #666666;
              line-height: 22px;
              
            }
          }
        }
      }
    }
    .el-pagination{
        padding: 20px 5px;
        text-align: right;
    }
  }
  .isActive{
    color: #4370F3;
  }
  .isconActive{
    color: #fff;
    font-weight: 600;
    display: block;
    border-color: #4370F3;
    background: #4370F3;
  }
}

</style>